<template>
	<scroll-view @scrolltolower="handerToLower" class="recommends_view" scroll-y v-if="recommends.length > 0">
		<!--推荐开始-->
		<view class="recommend_wrap">
			<view class="recommend_item" v-for="item in recommends" :key="item.index">
				<image mode="widthFix" :src="item.thumb"></image>
			</view>
		</view>
		<!--推荐结束-->
		<!-- 月份 开始-->
		<view class="moneths_wrap">
			<view class="moneths_title">
				<view class="moneths_title_info">
					<view class="moneths_info">
						<text> {{moneths.DD}} / </text>
						{{moneths.MM}} 月
					</view>
					<view class="moneths_text">
						{{moneths.title}}
					</view>
				</view>
				<view class="moneths_title_more">更多 > </view>
			</view>
			<view class="moneths_content">
				<view class="moneths_item" v-for="item in moneths.items" :key="item.id">
					<image mode="aspectFill" :src="item.img"></image>
				</view>
			</view>
		</view>
		<!-- 月份 结束-->

		<!-- 热门 开始-->
		<view class="hots_wrap">
			<view class="hots_title">
				<text>热门</text>
			</view>
			<view class="hots_content">
				<view class="hots_item" v-for="item in hots" :key="item.id">
					<image mode="aspectFill" :src="item.thumb"></image>
				</view>
			</view>
		</view>
		<!-- 热门 结束-->
	</scroll-view>
</template>

<script>
	import moment from "moment";
	export default {
		data() {
			return {
				//推荐列表
				recommends: [],
				//月份显示
				moneths: {},
				//热门
				hots: [],
				//请求参数
				params: {
					limit: 30,
					order: "hot",
					skip: 0
				},
				hasMore: true,
			}
		},
		mounted() {
			uni.setNavigationBarTitle({
				title: "推荐"
			})
			this.getList();
		},

		methods: {
			getList() {
				this.request({
					url: 'http://157.122.54.189:9088/image/v3/homepage/vertical',
					data: this.params,
				}).then(res => {
					if (res.res.vertical.length === 0) {
						this.hasMore = false;
						return;
					}
					if (this.recommends.length === 0) {
						this.recommends = res.res.homepage[1].items;
						this.moneths = res.res.homepage[2];
						this.moneths.MM = moment(this.moneths.stime).format("MM");
						this.moneths.DD = moment(this.moneths.stime).format("DD");
					}
					this.hots = [...this.hots, ...res.res.vertical];
				})
			},
			handerToLower() {
				if (this.hasMore) {
					this.params.skip += this.params.limit
					this.getList();
				} else {
					uni.showToast({
						title: "没有更多数据了",
						icon: "none"
					})
				}

			},
		}
	}
</script>

<style lang="scss" scoped>
	.recommends_view {
		height: calc(100vh - 36px);
	}

	.recommend_wrap {
		display: flex;
		flex-wrap: wrap;

		.recommend_item {
			width: 50%;
			border: 5rpx solid #FFFFFF;
		}
	}

	.moneths_wrap {
		.moneths_title {
			display: flex;
			justify-content: space-between;
			padding: 20rpx;

			.moneths_title_info {
				color: $uni-color-error;
				font-size: 30rpx;
				font-weight: 600;
				display: flex;

				.moneths_info {
					text {
						font-size: 36rpx;
					}
				}

				.moneths_text {
					font-size: 34rpx;
					color: #666;
					margin-left: 20rpx;
				}
			}

			.moneths_title_more {
				font-size: 24rpx;
				color: $uni-color-error;
			}
		}

		.moneths_content {
			display: flex;
			flex-wrap: wrap;


			.moneths_item {
				width: 33.33%;
				border: 5rpx solid #FFFFFF;
			}
		}
	}

	.hots_wrap {
		.hots_title {
			padding: 20rpx;

			text {
				border-left: 15rpx solid $uni-color-error;
				font-size: 34rpx;
				font-weight: 600;
				padding-left: 20rpx;
			}
		}

		.hots_content {
			display: flex;
			flex-wrap: wrap;
			.hots_item {
				width: 33.33%;
				border: 5rpx solid #FFFFFF;
			}
		}
	}
</style>
